<!DOCTYPE html>
<html lang="en-US">
<head>
	<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-96179028-7"></script>
	<script>
		window.dataLayer = window.dataLayer || [];

		// Disable GA on dev
		const disableGtag = !(location.hostname === `andreasbm.github.io` || location.hostname === `webskills.dev`);
		if (disableGtag) {
			window["ga-disable-UA-96179028-7"] = true;
		}

		// Setup gtag
		window.gtag = function () {
			if (disableGtag) {
				console.log("Track", arguments);
			} else {
				dataLayer.push(arguments);
			}
		};

		gtag("js", new Date());
		gtag("config", "UA-96179028-7", {"send_page_view": false});
	</script>

	<title>Web Skills</title>

	<!-- Charset -->
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="manifest" href="manifest.json">

	<!-- The theme color for the app -->
	<meta name="theme-color" content="#0B0B19">

	<!-- The viewport meta tag -->
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3, user-scalable=yes">

	<!-- Mobile-friendly iOS meta tags -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="mobile-web-app-status-bar-style" content="black">

	<!-- Mobile-friendly MS meta tags -->
	<meta name="msapplication-tap-highlight" content="no">

	<!-- SEO -->
	<meta name="title" content="Web Skills">
	<meta name="description" content="A visual overview of useful skills to learn as a web developer">
	<meta name="keywords"
	      content="web, skills, learn, overview, links, html, css, javascript, accessibility, web components, pwa, build tools, frameworks, testing, architecture, design, ux, algorithms, backend">
	<meta name="author" content="Andreas Mehlsen">
	<link rel="author" href="https://andreasbm.github.io">
	<link rel="canonical" href="https://andreasbm.github.io/web-skills/">

	<!-- Facebook -->
	<meta property="og:url" content="https://andreasbm.github.io/web-skills">
	<meta property="og:title" content="Web Skills">
	<meta property="og:description" content="A visual overview of useful skills to learn as a web developer">
	<meta property="og:see_also" content="https://andreasbm.github.io">
	<meta property="og:locale" content="en">
	<meta property="og:image:height" content="629">
	<meta property="og:image:width" content="1200">
	<meta property="og:image" content="https://andreasbm.github.io/web-skills/www/og-image.jpg">

	<!-- Twitter -->
	<meta name="twitter:url" content="https://andreasbm.github.io/web-skills">
	<meta name="twitter:description" content="A visual overview of useful skills to learn as a web developer">
	<meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:title" content="Web Skills">
	<meta name="twitter:creator" content="@andreasmehlsen">
	<meta name="twitter:image" content="https://andreasbm.github.io/web-skills/www/og-image.jpg">

	<!-- Google + -->
	<meta itemprop="name" content="Web Skills">
	<meta itemprop="description" content="A visual overview of useful skills to learn as a web developer">
	<meta itemprop="image" content="https://andreasbm.github.io/web-skills/www/og-image.jpg">

	<!-- Icons -->
	<link rel="icon" sizes="16x16" href="www/icon16x16.png">
	<link rel="icon" sizes="32x32" href="www/icon32x32.png">
	<link rel="icon" sizes="48x48" href="www/icon48x48.png">
	<link rel="icon" sizes="96x96" href="www/icon-circle96x96.png">
	<link rel="icon" sizes="120x120" href="www/icon-circle120x120.png">
	<link rel="icon" sizes="128x128" href="www/icon-circle128x128.png">
	<link rel="icon" sizes="192x192" href="www/icon-circle192x192.png">
	<link rel="icon" sizes="256x256" href="www/icon-circle256x256.png">
	<link rel="icon" sizes="512x512" href="www/icon-circle512x512.png">

	<link rel="apple-touch-icon" sizes="16x16" href="www/icon16x16.png">
	<link rel="apple-touch-icon" sizes="32x32" href="www/icon32x32.png">
	<link rel="apple-touch-icon" sizes="48x48" href="www/icon48x48.png">
	<link rel="apple-touch-icon" sizes="96x96" href="www/icon-circle96x96.png">
	<link rel="apple-touch-icon" sizes="120x120" href="www/icon-circle120x120.png">
	<link rel="apple-touch-icon" sizes="128x128" href="www/icon-circle128x128.png">
	<link rel="apple-touch-icon" sizes="192x192" href="www/icon-circle192x192.png">
	<link rel="apple-touch-icon" sizes="256x256" href="www/icon-circle256x256.png">
	<link rel="apple-touch-icon" sizes="512x512" href="www/icon-circle512x512.png">

	<!-- Splash -->
	<link rel="apple-touch-startup-image" href="www/splash-iphone5.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
	<link rel="apple-touch-startup-image" href="www/splash-iphone6.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)">
	<link rel="apple-touch-startup-image" href="www/splash-iphoneplus.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)">
	<link rel="apple-touch-startup-image" href="www/splash-iphonex.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)">
	<link rel="apple-touch-startup-image" href="www/splash-iphonexr.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)">
	<link rel="apple-touch-startup-image" href="www/splash-iphonexsmax.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)">
	<link rel="apple-touch-startup-image" href="www/splash-ipad.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)">
	<link rel="apple-touch-startup-image" href="www/splash-ipadpro1.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)">
	<link rel="apple-touch-startup-image" href="www/splash-ipadpro3.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)">
	<link rel="apple-touch-startup-image" href="www/splash-ipadpro2.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)">

	<!-- Preload / connect -->
	<link rel="preconnect" href="https://www.google-analytics.com">
	<link rel="dns-prefetch" href="https://fonts.gstatic.com/">
	<link rel="modulepreload" href="web_modules/lit-html.js" crossorigin="anonymous">
	<link rel="modulepreload" href="web_modules/lit-element.js" crossorigin="anonymous">
	<link rel="modulepreload" href="web_modules/common/lit-html-6bb77aec.js" crossorigin="anonymous">

	<link async rel="stylesheet" type="text/css" href="src/styles/global.css">
	<link async href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,700&display=swap" rel="stylesheet">
</head>
<body>
	<script src="src/app.js" type="module"></script>
	<ws-app></ws-app>

	<noscript>Please enable JavaScript to use this page.</noscript>
</body>
</html>